<template>
  <div>
    <div class="show-pc">
      <div class="my-works " style="background-color: var( --color-bg-F6); ">
        <div class="my-title ">
          <div class="head-item">
            <div class="title_left">
              <div>
                <img :src="userInfo.avatar ? userInfo.avatar : userImg" alt="头像" class="name-img">
              </div>
              <div class="info-container">
                <div class="information">
                  <div class="username">{{ userInfo.realname }}</div>
                  <div class="text">{{ userInfo.deptName }}&nbsp;&nbsp;{{ userInfo.positionName }}</div>
                </div>
              </div>
            </div>
            <div>
              <div class="button" @click="unfollowBtn(userInfo, '2')" v-if="userInfo.isConcern === '1'">
                已关注
              </div>
              <div class="button" @click="unfollowBtn(userInfo, '1')" v-if="userInfo.isConcern === '2'">
                关注
              </div>
              <div class="button" @click="unfollowBtn(userInfo, '2')" v-if="userInfo.isConcern === '3'">
                互关
              </div>
            </div>

          </div>

          <div class="title_right">

          </div>
          <div class="menu-frame">

            <!-- <div class="selector-wrapper">
              <div class="selector-container" :style="{ maxWidth: '76vw' }">
                <div v-for="item in menuItems" :key="item.columnId" class="menu-item"
                  :class="{ 'active': activeKey === item.columnId }" @click="handleSelect(item.columnId)">
                  {{ item.columnName }}
                </div>
              </div>
            </div> -->
            <div class="selector-wrapper">
              <div class="selector-container" :style="{ maxWidth: '100%' }">
                <div v-for="item in menuItems" :key="item.columnId" class="menu-item"
                  :class="{ 'active': activeKey === item.columnId }" @click="handleSelect(item.columnId)">
                  {{ item.columnName }}
                </div>
              </div>
            </div>


          </div>
          <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" :dataStatus="dataStatus" :loading="loading" @loadData="loadData">
              <template #default="{ item }">
                <Card :item />
              </template>
            </Waterfall>
          </div>
        </div>
      </div>
    </div>
    <!-- 手机端 -->
    <div class="show-wap">
      <div class="my-works-wap " style="background-color: var( --color-bg-F6); ">
        <div class="my-title-wap ">

          <div style="display: flex; align-items: center;">
            <div>
              <img :src="userInfo.avatar ? userInfo.avatar : userImg" alt="头像" class="name-img-wap">
            </div>
            <div class="info-container-wap">
              <div class="information">


                <div class="username-wap">{{ userInfo.realname }}</div>
                <div>
                  <span class="text-wap">{{ userInfo.deptName }}</span>&nbsp;&nbsp;
                  <span class="text-wap">{{ userInfo.positionName }}</span>

                </div>
              </div>
              <!-- <div class="account-wap">
              <div>
                账号：{{ userInfo.username }}
                <img src="../../assets/images/new_img/复制2.png" alt="" @click="copyAccount(userInfo.username)"
                  class="account-item-wap" v-show="!isCopied">
                <img src="../../assets/images/new_img/已复制.png" alt="" class="account-item-wap" v-show="isCopied">
              </div>

            </div> -->
            </div>
          </div>


          <div>
            <div class="button-wap" @click="unfollowBtn(userInfo, '2')" v-if="userInfo.isConcern === '1'">
              已关注
            </div>
            <div class="button-wap" @click="unfollowBtn(userInfo, '1')" v-if="userInfo.isConcern === '2'">
              关注
            </div>
            <div class="button-wap" @click="unfollowBtn(userInfo, '2')" v-if="userInfo.isConcern === '3'">
              互关
            </div>
          </div>







        </div>
        <div class="title_right-wap">
          <div>
            <div class="selector-wrapper-wap">
              <div class="selector-container-wap" :style="{ maxWidth: '76vw' }">
                <div v-for="item in menuItems" :key="item.columnId" class="menu-item-wap"
                  :class="{ 'active': activeKey === item.columnId }" @click="handleSelect(item.columnId)">
                  {{ item.columnName }}
                </div>
              </div>
            </div>
          </div>

          <div class="WaterfallFlow_item" style="margin-top: 20px;">
            <Waterfall :col="3" :data-source="list" :dataStatus="dataStatus" :loading="loading" @loadData="loadData">
              <template #default="{ item }">
                <Card :item />
              </template>
            </Waterfall>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Waterfall from '@/components/Waterfall/index.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
import { getUserId } from '@/utils/token'
import { useHttp } from "~/api/http";
import { watch, onMounted, ref } from 'vue'
import { useStore } from '@/store'
const { themeStore } = useStore()


const userInfo = ref({})
const list = ref([])
const loading = ref(false)
const dataStatus = ref(true)
const queryParams = ref({
  pageNo: 1,
  pageSize: 20,
  heUserId: route.params.id,
  columnId: ''
})

// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = (id) => {
  const account = id;
  const tempInput = document.createElement('input');
  tempInput.value = account;
  document.body.appendChild(tempInput);


  tempInput.select();
  document.execCommand('copy');

  // 删除临时输入框
  document.body.removeChild(tempInput);

  // 显示复制成功提示
  isCopied.value = true;

  // 3秒后隐藏提示
  setTimeout(() => {
    isCopied.value = false;
  }, 3000);
};


onMounted(() => {
  getUserInfo()
  setTimeout(() => {
    getMenuItems();
  }, 1000);

})

const getList = () => {
  if (!dataStatus.value || loading.value) return
  loading.value = true
  useHttp.get(`/web/my/hePicList`, queryParams.value).then(res => {
    loading.value = false
    list.value.push(...res.result.records)
    if (res.result.records.length < queryParams.value.pageSize) {
      dataStatus.value = false
    }
  })
}
getList()

// 加载数据
const loadData = () => {
  if (list.value.length === 0) return
  queryParams.value.pageNo += 1
  getList()
}

const menuItems = ref([
  { columnId: '', columnName: '全部', },
]);
const activeKey = ref('')
const handleSelect = (key) => {
  queryParams.value.pageNo = 1
  dataStatus.value = true
  activeKey.value = key
  queryParams.value.columnId = key
  list.value = []
  getList()
}

// 个人用户信息
const getUserInfo = () => {
  useHttp.get(`/web/my/heUser`, {
    heUserId: route.params.id
  }).then(res => {
    userInfo.value = res.result

  })
}

// 查询栏目
const getMenuItems = () => {
  useHttp.get('/web/my/heColumList', { heUserId: userInfo._rawValue.id }).then(res => {
    menuItems.value.push(...res.result)
  }).catch(err => {
  })
}


// 关注按钮
const unfollowBtn = (item, status) => {
  if (status === '2') {
    useHttp.post('/web/relations/unfollow', {
      publicityUserId: getUserId(),
      quiltPublicityUserId: item.id
    }).then(res => {
      userInfo.isConcern = status
      message.success(res.message)
      getCount()
      getUserInfo()
    })
  } else {
    useHttp.post('/web/relations/add', {
      publicityUserId: getUserId(),
      quiltPublicityUserId: item.id
    }).then(res => {

      userInfo.isConcern = res.result.isConcern
      message.success(res.result.msg)
      getCount()

      getUserInfo()

    })
  }


}


const heUserIdData = ref({
  heUserId: getUserId()
});
const getCount = () => {
  console.log(getUserId());

  useHttp.get('/web/my/myCount', heUserIdData).then((res) => {
    console.log(res);

    themeStore.userInfoMyCount = res.result


  });
}

</script>

<style scoped lang="less">
.my-works {
  width: 95.83333333333334vw;
  margin: 0 auto;
  padding-bottom: 30px;
  min-height: 100vh;


  .my-title {

    margin-top: 10px;
    min-height: 200px;
    flex-wrap: wrap;
    /* 允许换行 */
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    gap: 20px;

    .menu-frame {
      padding: 0 16px;
      margin: 20px 0;
    }

    .head-item {
      display: flex;
      justify-content: space-between;
      align-items: center;


      .title_left {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
        flex: 1;
        min-width: 250px;

        .name-img {
          width: clamp(80px, 10vw, 100px);
          /* 响应式头像大小 */
          height: clamp(80px, 10vw, 100px);
          border-radius: 50%;
          object-fit: cover;
        }

        .info-container {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .information {
          display: flex;
          flex-direction: column;
          // flex-wrap: wrap;
          // align-items: center;
          gap: 10px;
          color: var(--color-text);

          .username {

            font-size: var(--text-18);
            color: var(--color-text-3);
            font-weight: bold;
            margin: 0;
            line-height: 1.2;
          }

          .text {

            font-size: var(--text-16);
            color: var(--color-text-3);
          }
        }

        .account {
          margin-top: 10px;
          font-size: var(--text-14);
          color: var(--color-text-6);
          display: flex;
          align-items: center;
          gap: 5px;

          .account-item {
            width: 0.625vw;
            height: 0.625vw;
          }
        }

      }

      .button {
        width: 5.20vw;
        height: 2.08vw;
        text-align: center;
        line-height: 2.08vw;
        background-color: var(--color-btn-b-g);
        color: var(--color-text-con);
        border-radius: 0.52vw;
        font-size: 0.72vw;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: var(--btn-hover-b);
        }
      }


    }

    .title_right {
      display: flex;
      gap: clamp(10px, 2vw, 14px);
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      color: var(--color-text);

      .stats-item {
        text-align: center;
        min-width: 80px;

        .number {
          font-size: var(--text-22);
          color: #d7000e;
          line-height: 1;
          margin-bottom: 6px;
          font-weight: bold;

        }

        .text {
          font-size: var(--text-14);
          margin-top: 8px;
        }


      }
    }
  }


  .selector-wrapper {
    flex: 1;
    display: block;
    min-width: 0;
    overflow-x: auto;

    .selector-container {
      width: 100%;
      display: flex;
      border-radius: 8px;
      overflow-x: auto;
      white-space: nowrap;
      gap: 8px;
      margin-top: 0.52vw;
      padding-bottom: 0.52vw;

      &::-webkit-scrollbar {
        display: block;
        height: 4px;
      }

      &::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        border-radius: 2px;

      }

      &::-webkit-scrollbar-thumb {
        background-color: #d0d0d0;
        border-radius: 2px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #b0b0b0;
      }

      .menu-item {
        flex-shrink: 0;
        min-width: 80px;
        padding: 0 16px;
        height: 36px;
        line-height: 36px;
        font-size: var(--text-16);
        color: #787a7e;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 4px;
        transition: all 0.3s;

        &.active {
          background-color: var(--ba-color-sel);
          color: var(--color-text-3);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        &:hover {
          color: #333;
        }
      }
    }
  }





  .menu-item.active {
    text-align: center;
    line-height: 1.71vw;
    border-radius: 0.2vw;
    background-color: var(--ba-color-sel);
    color: var(--color-text-3);
  }


}

.selector-wrapper {

  display: flex;
  justify-content: center;
  align-content: center;


  /* 选择器主体 */
  .selector-container {
    display: flex;
    gap: 8px;
    border-radius: 8px;
    width: 100%;
    max-width: 76vw;

  }






  .selector-container::-webkit-scrollbar {
    display: none;

  }


}

// 手机端
.my-works-wap {
  width: 95%;
  margin: 0 auto;


  .my-title-wap {
    height: 100px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // gap: 20px;




    .name-img-wap {
      width: 80px;
      height: 80px;
      border-radius: 50%;


    }

    .info-container-wap {
      height: 80%;

      .username-wap {

        font-size: 16px;
        color: var(--color-text-3);
        font-weight: bold;
        margin: 0;
        line-height: 1.2;
      }

      .text-wap {
        font-size: 16px;
      }

      .account-wap {
        margin-top: 10px;
        font-size: 14px;
        color: var(--color-text-6);
        display: flex;
        align-items: center;
        gap: 5px;

        .account-item-wap {
          width: 15px;
          height: 15px;
        }

      }
    }

    .button-wap {
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: var(--color-btn-b-g);
      color: var(--color-text-con);
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
      position: relative;
      bottom: 10px;

    }
  }

  .title_right-wap {
    .selector-wrapper-wap {
      display: flex;
      justify-content: center;
      align-content: center;
      width: 100%;
      overflow-x: auto;
      /* 允许水平滚动 */
      scrollbar-width: none;

    }

    .selector-wrapper-wap::-webkit-scrollbar {
      display: none;
      /* 隐藏滚动条（Chrome/Safari） */
    }

    .selector-container-wap {
      display: flex;
      border-radius: 8px;
      width: auto;
      /* 改为自动宽度 */
      min-width: 100%;
      /* 确保容器至少和父元素一样宽 */
      padding: 0 10px;
      /* 添加一些内边距 */
      box-sizing: border-box;
      overflow-x: auto;
      /* 允许水平滚动 */
      scrollbar-width: none;
      /* 隐藏滚动条（Firefox） */
    }

    .selector-container-wap::-webkit-scrollbar {
      display: none;
      /* 隐藏滚动条（Chrome/Safari） */
    }

    .menu-item-wap {
      padding: 0 10px;
      white-space: nowrap;
      font-size: 16px;
      color: #787a7e;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      text-align: center;
      line-height: 33px;
      flex-shrink: 0;
    }

    .menu-item-wap.active {
      text-align: center;
      line-height: 33px;
      border-radius: 4px;
      background-color: var(--ba-color-sel);
      color: var(--color-text-3);
    }

  }
}
</style>
